<!--
  Created by IntelliJ IDEA.
  User: helinchong
  Date: 2017/9/18
  Time: 17:20
  To change this template use File | Settings | File Templates.
-->
<html>
<head>
    <title>登录</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/login/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/login/css/form-elements.css">
    <link rel="stylesheet" href="css/login/css/style.css">

    <script src="bootstrap/js/bootstrap.min.js"></script>
    <style type="text/css">
        *{

        }

        span.error{
            color:red;
        }
    </style>
</head>
<body style="background-image:url('css/login/img/backgrounds/1.jpg');">

<!-- Top content -->
<div class="top-content">

    <div class="inner-bg">
        <div class="container">
            <!-- <div class="row">
                 <div class="col-sm-8 col-sm-offset-2 text">
                     <h1><strong>Bootstrap</strong> Login Form</h1>
                     <div class="description">
                         <p>
                             This is a free responsive login form made with Bootstrap.
                             Download it on <a href="http://azmind.com"><strong>AZMIND</strong></a>, customize and use it as you like!
                         </p>
                     </div>
                 </div>
             </div>-->
            <div class="row">
                <div class="col-sm-6 col-sm-offset-3 form-box">
                    <div class="form-top">
                        <div class="form-top-left">
                            <h3>用户登录</h3>
                            <p>请输入用户名和密码:</p>
                            <!--<span style="color:red;">密码输入有误！</span>-->
                        </div>
                        <div class="form-top-right">
                            <i class="fa fa-lock"></i>
                        </div>
                    </div>
                    <div class="form-bottom">
                        <form role="form" id="sign" action="" method="post" class="login-form">
                            <div class="form-group">
                                <label class="sr-only" for="username">Username</label>
                                <input type="text" name="username" placeholder="请输入用户名" maxlength="20" class="form-username form-control" id="username">
                            </div>
                            <div class="form-group">
                                <label class="sr-only" for="password">Password</label>
                                <input type="password" name="password" placeholder="请输入密码"  maxlength="16" class="form-password form-control" id="password">
                            </div>
                            <button type="submit" class="btn">登录</button>
                        </form>
                    </div>
                </div>
            </div>
            <!--<div class="row">
                <div class="col-sm-6 col-sm-offset-3 social-login">
                    <h3>...or login with:</h3>
                    <div class="social-login-buttons">
                        <a class="btn btn-link-2" href="#">
                            <i class="fa fa-facebook"></i> Facebook
                        </a>
                        <a class="btn btn-link-2" href="#">
                            <i class="fa fa-twitter"></i> Twitter
                        </a>
                        <a class="btn btn-link-2" href="#">
                            <i class="fa fa-google-plus"></i> Google Plus
                        </a>
                    </div>
                </div>
            </div>-->
        </div>
    </div>

</div>


<!-- Javascript -->
<script type="text/javascript" src="js/jquery-3.2.1.min.js"/>
<script src="css/login/bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/js/login/jquery.backstretch.min.js"></script>
<script src="bootstrap/js/login/scripts.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/public.js"></script>

<!--[if lt IE 10]>
<script src="bootstrap/js/login/placeholder.js"></script>
<![endif]-->
<!--validate-->
<script src="js/jquery.validate.js"></script>
<script src="js/jquery.validate.js"></script>

<script type="text/javascript">
    $(function(){
        //验证
        $("#sign").validate({
            errorElement:"span",
            submitHandler:function(){
                //用户名密码
                var user = {"userName":$("#username").val(),"password":$("#password").val()};
                $.ajax({
                    url:requestUrl+"user/signIn",
                    type:"POST",
                    contentType:"application/json;charset=utf-8",
                    data:JSON.stringify(user),
                    crossDomain:true,
                    dateType:"json",
                    success:function(resultInfo){
                        var resultData = JSON.parse(resultInfo);
                        if(resultData.code=="100"){
                            $.cookie("hello_token",resultData.data.token,{expires: 1,path:"/"});
                            $.cookie("hello_user_name",resultData.data.userName,{expires: 1,path:"/"});
                            window.location.href = "userInfo.html";
                        }else{
                            alert(resultData.msg);
                        }

                    },
                    error:function(){
                        alert("请求异常!");
                    }
                });
            },
            rules:{
                username:{
                    required:true,
                    maxlength:16,
                    minlength:6,
                },
                password:{
                    required:true,
                    maxlength:16,
                    minlength:6,
                }
            },
            messages:{
                username:{required:"请输入用户名!",
                          maxlength:"用户名长度必须在4-20之间!",
                          minlength:"用户名长度必须在4-20之间!"},
                password:{required:"请输入密码!",
                          maxlength:"密码只能是6-16位数字,字母,特殊符号组成!",
                          minlength:"密码只能是6-16位数字,字母,特殊符号组成!"}
            }
        });
    });
</script>
</body>
</html>
